import React from 'react'
import { Form, Input, Card, InputNumber, Button } from 'antd'
import ThirdPartyFormControls from './components/third-party-form-controls'
import SelfProcessingFormData from './components/self-processing-form-data'
import RegionalCascade from './components/regional-cascade'
import 'antd/dist/antd.less'

const FormItem = Form.Item

const CustomizedForm = Form.create({
  name: 'global_state',
  onValuesChange(_, values) {
    // console.log(values, 'onValuesChange')
  },
  onFieldsChange(props, changedFields) {
    props.onChange(changedFields, { password: { value: "123456", kimcustomTest: "这是自定义测试" + Date.now() } })
    console.log(changedFields, '改变的字段')
  },
  mapPropsToFields(props) {
    console.log(props, "mapPropsToFields")
    return {
      username: Form.createFormField({
        ...props.username,
        value: props.username.value,
        kimcustomTest: "这是自定义测试" + Date.now(),
      }),
      password: Form.createFormField({
        ...props.password,
        kimcustomTest: "这是自定义测试" + Date.now(),
      })
    }
  }
})(props => {
  const { getFieldDecorator } = props.form
  return (
    <Form layout='inline'>
      <FormItem label='用户名' validateStatus='success'>
        {getFieldDecorator('username', {
          rules: [{ required: true, message: 'Username is required!' }]
        })(<Input />)}
      </FormItem>
    </Form>
  )
})

class Parent extends React.Component {
  state = {
    fields: { username: { value: 'Kim' }, password: { value: '123456' } }
  }

  render() {
    const { fields } = this.state
    return (
      <>
        <Card title='自定义表单' style={{ marginTop: 10 }}>
          {/* //todo kim-stamp this.setState高端操作 this.setState(({fields}) => ({fields: {...fields, ...changedFields}})) */}
          <CustomizedForm
            {...fields}
            onChange={(changedFields, kimCustomFields) => this.setState(({ fields }) => ({ fields: { ...fields, ...changedFields, ...kimCustomFields } })) // 回调
            }
          />
          <pre className='language-bash'>{JSON.stringify(fields, null, 2)}</pre>
          {/* {//todo kim-stamp JSON.stringify(fields, null, 2)} 高端用法 */}
        </Card>

        <Card
          title='自行处理表单数据，其实就是让组件受控'
          style={{ marginTop: 10 }}
        >
          <SelfProcessingFormData />
        </Card>

        <Card title='自定义或第三方的表单控件' style={{ marginTop: 10 }}>
          <Form
            layout='inline'
            onSubmit={e => {
              e.preventDefault()
              this.props.form.validateFields((err, values) => {
                if (err) return;
                console.log('形式的接收值:', values)
              })
            }}
          >
            <FormItem label='价格'>
              {this.props.form.getFieldDecorator('price', {
                // initialValue: { number: 10, currency: 'dollar' },
                rules: [
                  // { min: 2, max: 5, message: '长度不在范围内' },
                  {
                    validator: (rule, value, callback) => {
                      if (value.number > 0) return callback()
                      callback('价格必须大于零!')
                    }
                  }
                ]
              })(
                <ThirdPartyFormControls number={123456}
                  list={[
                    { value: 'rmb', name: 'RMB' },
                    { value: 'dollar', name: 'Dollar' },
                    { value: 'euro', name: 'Euro' },]} />)}
            </FormItem>

            <FormItem>
              {/* //todo htmlType='submit' 表单提交 */}
              <Button type='primary' htmlType='submit'>
                提交
              </Button>
            </FormItem>
          </Form>
        </Card>

        <Card title='区域级联' style={{ marginTop: 10 }}>
          <Form layout='inline' >
            <FormItem label='区域级联'>
              {this.props.form.getFieldDecorator('regional', {
                initialValue: { number: 10, currency: 'rmb' },
                rules: [
                  {
                    validator: (rule, value, callback) => {
                      if (value.number > 0) return callback()
                      callback('价格必须大于零!')
                    }
                  }
                ]
              })(<RegionalCascade number={123456} />)}
            </FormItem>
          </Form>
        </Card>

      </>
    )
  }
}

const WrappedParent = Form.create({ name: 'Parent' })(Parent)

export default WrappedParent

// API#
// Form#
// 更多示例参考 rc-form[http://react-component.github.io/form/]。
// 参数	                   说明	类型	默认值	版本
// form	                   经 Form.create() 包装过的组件会自带 this.props.form 属性	object	-
// hideRequiredMark	       隐藏所有表单项的必选标记	Boolean	false
// labelAlign	             label 标签的文本对齐方式	'left' | 'right'	'right'	3.15.0
// labelCol	               3.14.0 新增，之前的版本只能设置到 FormItem 上。label 标签布局，同 <Col> 组件，设置 span offset 值，如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}	object		3.14.0
// layout	                 表单布局	'horizontal'|'vertical'|'inline'	'horizontal'
// onSubmit	               数据验证成功后回调事件	Function(e:Event)
// wrapperCol	             3.14.0 新增，之前的版本只能设置到 FormItem 上。需要为输入控件设置布局样式时，使用该属性，用法同 labelCol	object		3.14.0
// colon	                 配置 Form.Item 的 colon 的默认值	boolean	true	3.15.0

// Form.create(options)#
// 使用方式如下：
// class CustomizedForm extends React.Component {}
// CustomizedForm = Form.create({})(CustomizedForm);
// options 的配置项如下。
// 参数	                    说明	类型	版本
// mapPropsToFields	       把父组件的属性映射到表单项上（如：把 Redux store 中的值读出），需要对返回值中的表单域数据用 Form.createFormField 标记，注意表单项将变成受控组件, error 等也需要一并手动传入	(props) => ({ [fieldName]: FormField { value } })
// name	                   设置表单域内字段 id 的前缀	-	3.12.0
// validateMessages	       默认校验信息，可用于把默认错误信息改为中文等，格式与 newMessages 返回值一致	Object { [nested.path]: String }
// onFieldsChange	         当 Form.Item 子节点的值（包括 error）发生改变时触发，可以把对应的值转存到 Redux store	Function(props, changedFields, allFields)
// onValuesChange	         任一表单域的值发生改变时的回调	(props, changedValues, allValues) => void
